/**
 * 使用Modal进行弹窗提示
 */
import {isArray} from 'lodash';
import React from 'react';
import {
  StyleSheet,
  Text,
  View,
  Modal,
  TouchableOpacity,
  Dimensions,
  FlatList,
  StatusBar,
} from 'react-native';

import {IconFont } from 'enoad-common/src/index';
const {width, height} = Dimensions.get('window');
const STATUS_BAR_HEIGHT = StatusBar.currentHeight; //即图中黄色部分
const heightBody = height - (STATUS_BAR_HEIGHT || 0);

export interface IProps {
  title: string;
  content: any;
  visible: boolean;
  confirm: (item: any) => void;
  cancel: () => void;
}

export default class BaseModal extends React.Component<IProps> {
  select: any;
  constructor(props: IProps) {
    super(props);
    this.select = new Array();
  }

  listItem = (item: any) => {
    let layouts = new Array();
    layouts.push(
      <TouchableOpacity
        style={{
          flex: 1,
          flexDirection: 'column',
          padding: 10,
        }}
        key={item.id}
        onPress={() => {
          this.select.push(item);
        }}>
        <Text
          style={{
            color: '#71747A',
            fontFamily: 'PingFangSC-Regular',
            fontSize: 15,
          }}>
          {item.name}
        </Text>
        <View style={{flexDirection: 'row', flex: 1, paddingRight: 10}}>
          <Text
            style={{
              flex: 1,
              color: '#C5CBD6',
              fontFamily: 'PingFangSC-Regular',
              fontSize: 16,
            }}>
            {item.select}
          </Text>
          <IconFont name={'youfang'} size={14} color={'#C5CBD6'} />
        </View>
      </TouchableOpacity>,
    );
    return layouts;
  };

  render() {
    return (
      <Modal
        transparent={true}
        visible={this.props.visible}
        animationType={'fade'}
        onRequestClose={() => {
          this.props.cancel && this.props.cancel();
        }}>
        <TouchableOpacity
          style={styles.view}
          activeOpacity={1}
          onPress={() => {
            this.props.cancel && this.props.cancel();
          }}>
          <View style={styles.container}>
            <View style={styles.title}>
              <Text>{this.props.title}</Text>
              <TouchableOpacity
                style={styles.cancel}
                onPress={() => {
                  this.props.cancel && this.props.cancel();
                }}>
                <Text style={{padding: 5, color: '#4E80F5'}}>{'关闭'}</Text>
              </TouchableOpacity>
            </View>
            {this.props.content && isArray(this.props.content) ? (
              <FlatList
                keyboardShouldPersistTaps="always"
                style={{flex: 1}}
                data={this.props.content}
                keyExtractor={(item, index) => index.toString()}
                renderItem={({item}) => {
                  return this.listItem(item);
                }}
              />
            ) : null}

            <View style={styles.bottom}>
              <TouchableOpacity
                style={styles.confirm}
                onPress={() => {
                  this.props.confirm && this.props.confirm(this.select);
                }}>
                <Text
                  style={{
                    color: 'white',
                    fontSize: 14,
                    fontFamily: 'PingFangSC-Regular',
                  }}>
                  {'确定'}
                </Text>
              </TouchableOpacity>
            </View>
          </View>
        </TouchableOpacity>
      </Modal>
    );
  }
}

const styles = StyleSheet.create({
  view: {
    width: width,
    height: heightBody,
    backgroundColor: '#8C8C929B',
  },
  container: {
    flex: 1,
    backgroundColor: 'white',
    position: 'absolute',
    flexDirection: 'column',
    width: width,
    bottom: 0,
    left: 0,
    borderTopLeftRadius: 8,
    borderTopRightRadius: 8,
  },
  title: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    height: 44,
  },

  cancel: {
    position: 'absolute',
    right: 0,
    paddingRight: 15,
  },
  confirm: {
    width: 200,
    borderRadius: 20,
    backgroundColor: '#4E80F5',
    padding: 5,
    alignItems: 'center',
  },
  bottom: {
    backgroundColor: '#ffffff',
    paddingTop: 18,
    paddingBottom: 18,
    flex: 1,
    alignItems: 'center',
  },
});
